<script setup>
import ButtonLogin from '@/components/ButtonLogin.vue' // 假设此组件存在
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

// --- 各区域的 Ref ---
const scrollContainerRef = ref(null) // 最外层容器 Ref
const contentRef = ref(null) // 主要内容滚动区域 Ref
const introSectionRef = ref(null)
const dehazingSectionRef = ref(null)
const fusionSectionRef = ref(null)
const detectionSectionRef = ref(null)
const sections = ref([]) // 存储所有 section 的 Ref

// --- 路由导航 ---
const router = useRouter()
const toLogin = () => {
  router.push('/login') // 如果你的登录路由不同，请调整
}
const toGitee = () => {
  window.open('https://gitee.com/mindwell/bank-management') // 替换为你的实际联系方式/仓库链接
}

// --- 侧边导航状态 ---
const currentSectionIndex = ref(0) // 当前活动部分的索引

// --- 数字动画逻辑 ---
const animateNumber = (element, target, duration) => {
  let start = 0
  const stepTime = Math.abs(Math.floor(duration / target))
  const timer = setInterval(() => {
    start += 1
    element.textContent = start.toFixed(2).replace(/\.00$/, '') // 移除小数点后多余的 0
    if (start >= target) {
      element.textContent = target.toFixed(2).replace(/\.00$/, '') // 确保最终值精确
      clearInterval(timer)
    }
  }, stepTime)
}

// --- 监听卡片进入视口触发动画 ---
const setupNumberAnimation = () => {
  const cards = document.querySelectorAll('.advantage-card')
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const numberEl = entry.target.querySelector('.advantage-number')
          const target = parseFloat(numberEl.getAttribute('data-target'))
          if (!numberEl.classList.contains('animated')) {
            animateNumber(numberEl, target, 1500) // 动画持续 1.5 秒
            numberEl.classList.add('animated') // 标记为已动画
          }
        }
      })
    },
    { threshold: 0.5 } // 当卡片 50% 可见时触发
  )

  cards.forEach((card) => observer.observe(card))
}

// --- 滚动逻辑 ---
const scrollToSection = (index) => {
  if (sections.value[index]) {
    sections.value[index].scrollIntoView({ behavior: 'smooth' }) // 平滑滚动到指定部分
  }
}

// --- Intersection Observer 用于滚动监听 (Scrollspy) ---
let observer = null

const observerCallback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 找到当前交叉部分的索引
      const index = sections.value.findIndex((sec) => sec === entry.target)
      if (index !== -1) {
        currentSectionIndex.value = index // 更新侧边导航的活动状态
      }
    }
  })
}

onMounted(() => {
  // 将 section 的 ref 添加到 sections 数组中
  sections.value = [
    introSectionRef.value,
    dehazingSectionRef.value,
    fusionSectionRef.value,
    detectionSectionRef.value
  ].filter((el) => el) // 过滤掉可能为 null 的元素

  // 确保滚动容器和 sections 都已挂载
  if (contentRef.value && sections.value.length > 0) {
    observer = new IntersectionObserver(observerCallback, {
      root: contentRef.value, // 观察 intersections 相对于 contentRef 元素 (滚动容器)
      threshold: 0.6 // 当 section 60% 可见时触发回调
    })

    // 观察每一个 section
    sections.value.forEach((section) => observer.observe(section))
  }
  // 确保初始状态正确，以防 observer 未立即触发 (例如页面加载时就在顶部)
  if (contentRef.value && contentRef.value.scrollTop === 0) {
    currentSectionIndex.value = 0
  }

  // 初始化数字动画
  setupNumberAnimation()
})

onUnmounted(() => {
  // 组件卸载时停止观察并断开连接
  if (observer) {
    sections.value.forEach((section) => {
      if (section) observer.unobserve(section)
    })
    observer.disconnect()
  }
})
</script>

<template>
  <div class="scroll-container" ref="scrollContainerRef">
    <header class="header">
      <h1 class="title">基于双模态感知的浓烟环境下人体目标实时检测系统</h1>
      <button-login
        @click="toLogin"
        text="登录/注册 →"
        extraClass="login-btn header-login-btn"
      ></button-login>
    </header>

    <nav class="side-nav">
      <ul>
        <li
          v-for="(section, index) in ['介绍', '去烟', '融合', '检测']"
          :key="index"
          :class="{ active: currentSectionIndex === index }"
          @click="scrollToSection(index)"
        >
          <span class="dot"></span>
          <span class="tooltip">{{ section }}</span>
        </li>
      </ul>
    </nav>

    <main class="content" ref="contentRef">
      <section class="section section--intro" ref="introSectionRef">
        <div class="system-intro">
          <div class="left">
            <h1>
              基于<span>双模态感知</span>的<br />浓烟环境下<span>人体目标实时检测</span>系统
            </h1>
            <p style="font-size: 2rem; line-height: 1.5">
              系统通过双模态感知技术与微服务架构，为消防指挥中心工作人员提供高效的指挥与协作工具，提升火灾应急响应能力。
            </p>
            <div class="btn-wrapper">
              <button-login
                @click="toLogin"
                text="立即体验"
                extraClass="btn-use btn-intro"
              ></button-login>
              <button-login
                @click="toGitee"
                text="联系我们"
                extraClass="btn-contact btn-intro"
              ></button-login>
            </div>
          </div>
          <figure class="right">
            <img
              src="/src/assets/model/金融.png"
              alt="系统介绍插图"
              class="img"
            />
          </figure>
        </div>
      </section>

      <section class="section section--dehazing" ref="dehazingSectionRef">
        <div class="section-content layout-variant-1">
          <div class="text-content">
            <h2 class="section-title">智能去烟模块</h2>
            <p>
              利用多尺度暗通道去烟算法，有效去除红外图像中的烟雾干扰，还原清晰视野。
            </p>
            <div class="advantages">
              <div class="advantage-card">
                <h3>细节增强</h3>
                <p>
                  平均梯度提升高达
                  <span class="advantage-number" data-target="183.58">0</span>%
                </p>
              </div>
              <div class="advantage-card">
                <h3>信息恢复</h3>
                <p>
                  信息熵提升最高
                  <span class="advantage-number" data-target="7.68">0</span>%
                </p>
              </div>
              <div class="advantage-card">
                <h3>实时处理</h3>
                <p>
                  每帧约需
                  <span class="advantage-number" data-target="94.15">0</span>ms
                </p>
              </div>
            </div>
          </div>
          <div class="visual-content image-comparison">
            <figure>
              <img src="/src/assets/model/red.png" alt="原始红外图像" />
              <figcaption>原始红外图像</figcaption>
            </figure>
            <span class="arrow">↓</span>
            <figure>
              <img src="/src/assets/model/dehaze.png" alt="去烟后图像" />
              <figcaption>去烟后图像</figcaption>
            </figure>
          </div>
        </div>
      </section>

      <section class="section section--fusion" ref="fusionSectionRef">
        <div class="section-content layout-variant-2">
          <div class="text-content">
            <h2 class="section-title">对齐与双模态融合模块</h2>
            <p>
              精确对齐热成像与红外图像，融合两者优势信息，生成信息更丰富的图像。
            </p>
            <div class="advantages">
              <div class="advantage-card">
                <h3>300倍效率提升</h3>
                <p>
                  单应矩阵预计算，约需
                  <span class="advantage-number" data-target="30">0</span>ms
                </p>
              </div>
              <div class="advantage-card">
                <h3>亚像素级对齐</h3>
                <p>R-ELAN 技术确保超高精度融合</p>
              </div>
              <div class="advantage-card">
                <h3>浓烟环境稳健</h3>
                <p>Transformer 优化不确定性处理</p>
              </div>
            </div>
          </div>
          <div class="visual-content image-fusion">
            <figure class="fusion-item">
              <img src="/src/assets/model/ir.jpg" alt="红外图像" />
              <figcaption>红外图像</figcaption>
            </figure>
            <figure class="fusion-item">
              <img src="/src/assets/model/tr.jpg" alt="热成像图像" />
              <figcaption>热成像图像</figcaption>
            </figure>
            <figure class="fusion-item fusion-result">
              <img src="/src/assets/model/fusion.jpg" alt="融合后图像" />
              <figcaption>融合后图像</figcaption>
            </figure>
          </div>
        </div>
      </section>

      <section class="section section--detection" ref="detectionSectionRef">
        <div class="section-content layout-variant-3">
          <div class="text-content">
            <h2 class="section-title">YOLOv12 人体检测模块</h2>
            <p>
              基于改进的YOLOv12算法，在融合后的图像上实现快速精准的人体目标检测。
            </p>
            <div class="advantages">
              <div class="advantage-card">
                <h3>性能提升</h3>
                <p>
                  mAP50-95 达
                  <span class="advantage-number" data-target="0.9926">0</span>
                </p>
              </div>
              <div class="advantage-card">
                <h3>极速推理</h3>
                <p>
                  约需
                  <span class="advantage-number" data-target="3.08">0</span>ms
                </p>
              </div>
              <div class="advantage-card">
                <h3>超高精度</h3>
                <p>
                  检测精度达
                  <span class="advantage-number" data-target="99.99">0</span>%
                </p>
              </div>
              <div class="advantage-card">
                <h3>完美召回</h3>
                <p>
                  召回率
                  <span class="advantage-number" data-target="100">0</span>%
                </p>
              </div>
            </div>
          </div>
          <div class="visual-content image-detection">
            <figure>
              <img
                src="/src/assets/model/detection.jpg"
                alt="人体检测结果示意图"
              />
              <figcaption>检测结果示意图</figcaption>
            </figure>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<style lang="scss" scoped>
// --- 定义一些基础变量 ---
$color-primary: #4834d4; // 主题色 (紫色)
$color-primary-dark: #3a29a3; // 深色主题色
$color-secondary: #ff9800; // 辅助色 (橙色)
$color-white: #fff;
$color-black: #000;
$color-grey-light-1: #f8f9fa;
$color-grey-light-2: #e9ecef;
$color-grey-dark-1: #555;
$color-grey-dark-2: #777;
$color-dark: #333;
$header-height: 8rem;
$nav-width: 5rem; // 侧边导航区域宽度
$base-font-size: 1.6rem; // 假设基础 HTML font-size 为 62.5% (10px)

// --- 基础样式 ---
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%; // 1rem = 10px
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: $color-grey-dark-1;
  background-color: $color-grey-light-1;
  overflow: hidden;
}

.scroll-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

// --- 头部样式 ---
.header {
  background-color: $color-white;
  height: $header-height;
  width: 100%;
  box-shadow: 0 0.5rem 1.5rem rgba($color-black, 0.08);
  color: $color-dark;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;

  .title {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  .header-login-btn {
    padding: 1.2rem 2.5rem;
    width: auto;
    font-size: $base-font-size;
    border-radius: 5px;
  }
}

// --- 主要内容区域 ---
.content {
  margin-top: $header-height;
  height: calc(100vh - #{$header-height});
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

// --- Section 基础样式 ---
.section {
  height: calc(100vh - #{$header-height});
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem $nav-width 4rem 6rem;
  position: relative;
  border-bottom: 1px solid $color-grey-light-2;

  &:last-child {
    border-bottom: none;
  }

  &:nth-child(odd) {
    background-color: $color-white;
  }
  &:nth-child(even) {
    background-color: $color-grey-light-1;
  }

  opacity: 1;
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

// --- Section 1: Intro 样式 ---
.section--intro {
  background-color: $color-grey-light-1;

  .system-intro {
    display: grid;
    grid-template-columns: repeat(2, minmax(min-content, 1fr));
    align-items: center;
    gap: 6rem;
    width: 100%;
    max-width: 140rem;
    margin: 0 auto;

    .left {
      justify-self: end;
      width: 100%;
      h1 {
        font-size: 4rem;
        line-height: 1.3;
        margin-bottom: 2.5rem;
        color: $color-dark;
        font-weight: 700;
        span {
          color: $color-primary;
        }
      }
      p {
        font-size: 2rem;
        line-height: 1.6;
        margin-bottom: 4rem;
        color: $color-grey-dark-1;
      }
      .btn-wrapper {
        display: flex;
        gap: 2rem;
        .btn-intro {
          padding: 1.5rem 3rem;
          font-size: $base-font-size;
          font-weight: 500;
          border-radius: 50px;
          transition: all 0.3s ease;
          cursor: pointer;
          border: none;
          &.btn-use {
            background-color: $color-primary;
            color: $color-white;
          }
          &.btn-contact {
            background-color: $color-secondary;
            color: $color-white;
          }

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 1rem 2rem rgba($color-black, 0.15);
          }
          &:active {
            transform: translateY(-1px);
            box-shadow: 0 0.5rem 1rem rgba($color-black, 0.1);
          }
        }
      }
    }

    .right {
      justify-self: start;
      width: 100%;

      .img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
    }
  }
}

// --- 新 Section 的通用内容样式 ---
.section-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 8rem;
  align-items: center;
  width: 100%;
  max-width: 130rem;
  margin: 0 auto;

  .text-content {
    text-align: left;
    .section-title {
      font-size: 4rem;
      font-weight: 600;
      color: $color-primary-dark;
      margin-bottom: 2rem;
      position: relative;
      padding-bottom: 1rem;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 5rem;
        height: 4px;
        background-color: $color-secondary;
        border-radius: 2px;
      }
    }
    p {
      font-size: 2rem;
      color: $color-grey-dark-1;
      margin-bottom: 3rem;
    }
  }

  .visual-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  figure {
    text-align: center;
    img {
      display: block;
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 0.5rem 1.5rem rgba($color-black, 0.1);
      margin-bottom: 1rem;
      background-color: $color-grey-light-2;
      padding: 1rem;
      border: 1px solid $color-grey-light-2;
    }
    figcaption {
      font-size: 2rem;
      color: $color-grey-dark-2;
      font-style: italic;
    }
  }

  // --- 优势卡片样式 ---
  .advantages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
    margin-top: 3rem;
  }

  .advantage-card {
    background: linear-gradient(135deg, #ffffff, #f9f9f9);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 10px rgba($color-black, 0.1);
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: slideIn 0.5s forwards;
    animation-delay: calc(var(--index) * 0.2s); // 每个卡片延迟进入

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba($color-primary, 0.2);
    }

    h3 {
      font-size: 2rem;
      color: $color-primary-dark;
      margin-bottom: 1rem;
    }

    p {
      font-size: 1.6rem;
      color: $color-grey-dark-1;
      margin: 0;
    }

    .advantage-number {
      font-size: 2.4rem;
      font-weight: 700;
      color: $color-secondary;
      display: inline-block;
      transition: color 0.3s ease;
    }
  }

  @keyframes slideIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

// --- 新 Section 的布局变体 ---

// 布局变体 1 (去烟 - 并排比较)
.layout-variant-1 {
  .visual-content.image-comparison {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    figure {
      flex: 1;
      img {
        height: 30rem;
      }
    }
    .arrow {
      font-size: 4rem;
      color: $color-secondary;
      font-weight: bold;
      flex-shrink: 0;
    }
  }
}

// 布局变体 2 (融合 - 2小 + 1大结果)
.layout-variant-2 {
  grid-template-columns: 1.5fr 1fr;
  .text-content {
    order: 2;
  }
  .visual-content {
    order: 1;
  }

  .visual-content.image-fusion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 2rem;
    align-items: end;

    .fusion-item {
      width: 100%;
      img {
        height: 23rem;
        object-fit: cover;
      }

      &.fusion-result {
        grid-column: 1 / -1;
        margin-top: 1rem;
        img {
          height: 43rem;
          object-fit: cover;
        }
      }
    }
  }
}

// 布局变体 3 (检测 - 单个大图像)
.layout-variant-3 {
  align-items: start;
  gap: 5rem;
  grid-template-columns: 0.8fr 1.2fr;

  .text-content {
    padding-top: 2rem;
  }

  .visual-content.image-detection {
    justify-content: center;
    figure {
      img {
        height: 50rem;
        object-fit: contain;
      }
    }
  }
}

// --- 侧边导航样式 ---
.side-nav {
  position: fixed;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  z-index: 50;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;

    li {
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;

      .dot {
        width: 1.4rem;
        height: 1.4rem;
        background-color: rgba($color-grey-dark-2, 0.5);
        border-radius: 50%;
        transition: all 0.3s ease;
        border: 2px solid transparent;
      }

      .tooltip {
        position: absolute;
        top: 50%;
        right: 100%;
        transform: translateY(-50%) translateX(-10px);
        background-color: $color-dark;
        color: $color-white;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        font-size: 2rem;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.2s ease,
          transform 0.2s ease;
        pointer-events: none;
      }

      &:hover .dot {
        background-color: $color-primary;
      }

      &:hover .tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(-15px);
      }

      &.active .dot {
        background-color: $color-white;
        border-color: $color-primary;
        transform: scale(1.2);
        box-shadow: 0 0 0 3px rgba($color-primary, 0.3);
      }
    }
  }
}

// --- 响应式设计 ---
@media (max-width: 992px) {
  html {
    font-size: 56.25%;
  }
  .header {
    padding: 0 2rem;
  }
  .section {
    padding: 4rem $nav-width 4rem 3rem;
  }
  .section-content {
    grid-template-columns: 1fr;
    gap: 4rem;
    text-align: center;

    .text-content {
      order: 1;
      text-align: center;
    }
    .visual-content {
      order: 2;
    }

    .text-content .section-title::after {
      left: 50%;
      transform: translateX(-50%);
    }

    .advantages {
      grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    }
  }

  .layout-variant-2 {
    grid-template-columns: 1fr;
    .text-content {
      order: 1;
    }
    .visual-content {
      order: 2;
    }
    .visual-content.image-fusion {
      grid-template-columns: 1fr 1fr;
    }
  }
  .layout-variant-3 {
    grid-template-columns: 1fr;
    .visual-content.image-detection figure {
      max-width: 90%;
    }
  }

  .side-nav {
    right: 1rem;
  }
  .side-nav ul li .tooltip {
    display: none;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 50%;
  }
  .header .title {
    font-size: 2.2rem;
  }
  .header .header-login-btn {
    padding: 1rem 1.5rem;
    font-size: 1.4rem;
  }
  .section--intro .system-intro {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  .section--intro .system-intro .left {
    justify-self: center;
    width: 100%;
    order: 2;
  }
  .section--intro .system-intro .right {
    justify-self: center;
    order: 1;
    .img {
      width: 70%;
      max-width: 30rem;
    }
  }
  .section--intro .system-intro .left .btn-wrapper {
    justify-content: center;
  }

  .layout-variant-1 .visual-content.image-comparison {
    flex-direction: column;
    .arrow {
      transform: rotate(90deg);
      margin: 1rem 0;
    }
    figure {
      max-width: 80%;
    }
  }
  .layout-variant-2 .visual-content.image-fusion {
    grid-template-columns: 1fr;
    img {
      height: auto;
      max-height: 20rem;
    }
    .fusion-result img {
      max-height: 25rem;
    }
  }

  .side-nav {
    display: none;
  }

  .advantages {
    grid-template-columns: 1fr;
  }
}
</style>
